<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#000" title="向商家付款" ></nav-bars>
		<view class="wrap">
			<view class="paddingBox">
				<view class="top-column flex align-center">
					<view class="head-portrait">
						<image :src="store_info.store_logo"></image>
					</view>
					<view class="nickname text-overflow">{{store_info.store_name}}</view>
				</view>
				<view class="paymentBlock">
					<view class="bgArea">
						<view class="payName">付款金额</view>
						<view class="inputBlock flex align-center">
							<view class="symbol">￥</view>
							<input type="digit" v-model="money" placeholder="请输入付款金额" placeholder-class="placeholder-input" />
						</view>
					</view>
					<view class="memoBlock flex align-center">
						<view class="memoLeft text-overflow">
                             备注 
						</view>
						<view class="memoRight text-overflow">
							<input type="text" v-model="memo" placeholder="添加备注" placeholder-class="placeholder-input"/>
						</view>
					</view>
				</view>
			</view>
			<view class="bottomBlock">
				<view class="settlementBox flex align-center">
					<view class="sideBarLeft">
						<text style="font-size: 28rpx;margin-right: 2rpx;">
							总计
						</text>
						<text class="price_color">￥</text>
						<text class="price_color" style="font-size: 42rpx;">{{parseFloat(money||0.00)}}</text>
					</view>
					<view class="sideBarRight" @click="showPayment">
						<view class="btn">立即支付</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="wrap-modal" :class="[is_show ? 'show' : 'cu-modal']" @click.stop="is_show = false">
			<view class="content-modal" @click.stop="">
				<view class="box">
					<view class="title">
						请确认商家信息无误
					</view>
					<view class="sroreName itemBlock flex align-center">
						<view class="sideBarLeft">付款给商家</view>
						<view class="sideBarRight">{{store_info.store_name}}</view>
					</view>
					<!-- <view class="itemBlock flex align-center">
						<view class="sideBarLeft">收款人</view>
						<view class="sideBarRight">xxx</view>
					</view> -->
					<view class="itemBlock flex align-center">
						<view class="sideBarLeft">项目名称</view>
						<view class="sideBarRight">收款单</view>
					</view>
					<view class="msgs">
						请谨慎核对收款方信息，风险自行承担
					</view>
					<view class="paymameBtn">
						<view class="btn" @click="payments">
							立即支付
						</view>
					</view>
				</view>
			</view>
			<image class="close" :src="imageUlr+'/static/activity/close.png'" @click="closePopup"></image>
		</view>
		<!-- 弹窗 -->
	</view>
</template>

<script>
	import activity from '@/service/activity.js'
	import service_now from '@/service/now.js'
	export default {
		components: {

		},
		data() {
			return {
				navBackground: '',
				imageUlr: this.$static,
				is_show: false, //显示状态
				store_id:'',//店铺id
				store_info:{},
				money:'',
				memo:'',
			}
		},
		onLoad(options) {
			let scene = decodeURIComponent(options.scene);
			this.$utils.getUrl()
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.redirectTo({
					url: '/pages_login/pages/login/login/index'
				});
			}
			scene = scene.split('&');
			let obj = {};
			let app = getApp();
			for (let i = 0; i < scene.length; i++) {
				let newscene = scene[i].split('=');
				obj[newscene[0]] = newscene[1];
			}
			if(obj.sid){
				this.store_id=obj.sid
			}else{
				this.store_id=options.sid
			}
			this.getstoreDetail();
		},
		methods:{
			showPayment(){
				if(!this.money || this.money==''){
					uni.showToast({
						title: '请填写付款金额',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				if(this.money<=0){
					uni.showToast({
						title: '请输入大于0的付款金额',
						icon: 'none',
						duration: 2500
					});
					return;
				}
				this.is_show=true;
			},
			getstoreDetail(){
				service_now.storeDetail({
					store_id:this.store_id,
					user_id:uni.getStorageSync('userId')
				}).then(res => {
				if (res.code == 1) {
					this.store_info=res.data;
				}
				})
			},
			//支付
			payments(){
				this.is_show=false;
				service_now.baseFastpay({
					pay_amount: this.money,
					store_id: this.store_id,
					memo:this.memo,
				}).then(res => {
					if (res.code == 1) {
						let _this=this;
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: (ress) => {
								uni.navigateTo({
									url: "/pages_activity/pages/payment/sucess?type=1"+
												'&store=' + _this.store_info.store_name+'&m='+_this.money+'&no='+res.data.relation_order_no+'&time='+res.data.timeStamp
								})
							},
							fail: (err) => {
								console.log('err',err)
								uni.navigateTo({
									url: "/pages_activity/pages/payment/sucess?type=0"+
												'&store=' + _this.store_info.store_name+'&m='+_this.money+'&no='+res.data.relation_order_no+'&time='+res.data.timeStamp
								})
							}
						});
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel:false,
							success: function (res) {
								 
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		.wrap {
			.paddingBox {
				width: 96%;
				margin: auto;
				.top-column{
					width: 100%;
					margin-top: 54rpx;
					.head-portrait{
						width: 112rpx;
						height: 112rpx;
						background: #BBBBBB;
						border-radius: 50%;
						image{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.nickname{
						width: 283rpx;
						height: 45rpx;
						font-size: 32rpx;
						color: #08131A;
						text-indent: 20rpx;
					}
				}
				.paymentBlock{
					margin-top: 54rpx;
					.bgArea{
						width: 100%;
						height: 210rpx;
						border-radius: 12rpx;
						background-color: #FFFFFF;
						.payName{
							width: 100%;
							height: 60rpx;
							font-size: 28rpx;
							font-weight: bold;
							padding-top: 10rpx;
							text-indent: 2%;
							color: #101010;
						}
						.inputBlock{
							width:98%;
							margin: auto;
							height: 109rpx;
							background: #FFFFFF;
							border: 1px solid #CB9439;
							border-radius: 16rpx;
							.symbol{
								width: 34rpx;
								height: 40rpx;
								margin-left: 10rpx;
								font-size: 32rpx;
								font-weight: bold;
								color: #101010;
							}
							input{
								width: 100%;
								height: 107rpx;
								line-height:107rpx;
							}
						}
					}
				}
				.memoBlock{
					width: 100%;
					height: 114rpx;
					margin:28rpx auto;
					border-radius:12rpx;
					background-color: #FFFFFF;
					justify-content: space-between;
					.memoLeft{
						padding-left:10rpx;
						width: 72rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #101010;
					}
					.memoRight{
						width:50%;
						height: 40rpx;
						padding-right:10rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #A6A6A6;
						text-align: right;
					}
				}
			}
			.bottomBlock{
				width: 100%;
				height: 124rpx;
				background-color: #FFFFFF;
				position: fixed;
				bottom:54rpx;
				.settlementBox{
					width: 94%;
					margin:20rpx auto;
					justify-content: space-between;
					.sideBarLeft{
						float: left;
						text.price_color{
							color: #FF451E;
						}
					}
					.sideBarRight{
						width: 184rpx;
						height: 72rpx;
						text-align: center;
						line-height: 72rpx;
						background: linear-gradient(270deg, #CB9439 0%, #EBB55C 100%);
						border-radius: 36rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.wrap-modal {
		
			position: fixed;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 500;
		
			.content-modal {
				width: 92%;
				height: auto;
				margin: 400rpx auto;
				padding-bottom: 34rpx;
				background-color: #F5F5F5;
				border-radius: 20rpx;
				margin-bottom: 68rpx;
		
				.box {
					padding: 33rpx;
		
					.title {
						// height: 74rpx;
						margin:50rpx 0 50rpx 0;
						font-size: 32rpx;
						font-weight: bold;
						text-align: center;
						color: #201B18;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.itemBlock{
						height:68rpx;
						justify-content: space-between;
						.sideBarLeft{
							width: 150rpx;
							height: 37rpx;
							font-size: 28rpx;
							color: #717171;
						}
						.sideBarRight{
							width: 290rpx;
							height: 38rpx;
							text-align: right;
							font-size: 28rpx;
							color: #101010;
						}
					}
					.msgs{
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						color: #FF451E;
						text-align: center;
						font-size: 22rpx;
					}
					.paymameBtn{
						margin-top:20rpx;
						.btn{
							width: 500rpx;
							height: 84rpx;
							margin: auto;
							line-height: 84rpx;
							color: #fff;
							text-align: center;
							background: linear-gradient(270deg, #CB9439 0%, #EBB55C 100%);
							border-radius: 55rpx;
						}
					}
				}
		
			}
			.close {
				width: 38rpx;
				height: 38rpx;
				margin: auto;
			}
		}
		.show {
			display: block;
		}
		
		.cu-modal {
			display: none;
		}
		.flex{
			display: flex;
		}
		.align-center{
			align-items: center;
		}
		.placeholder-input{
			text-indent: 2rpx;
			font-size: 28rpx;
		}
		.text-overflow{
			overflow:hidden;
			text-overflow:ellipsis;
			-o-text-overflow:ellipsis;
			white-space:nowrap;
		}
	}
</style>
